<template>
    <div class="dashboard-container">
    <div class="app-container">
      <h2>
          <el-tabs value="first">
            <el-tab-pane label="登录用户设置" name="first">
                <el-form ref="userNew" label-width="100px" class="loginMsg" :rules="rules" :model="userData">
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="userData.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password2">
                        <el-input v-model="userData.password2"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="saveUser">提交</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="个人详情" name="second">
                <el-form ref="userMsg" label-width="150px" :model="Msg">
                    <p>基础信息</p>
                    <el-form-item label="最高学历">
                        <el-select placeholder="请选择" v-model="Msg.theHighestDegreeOfEducation">
                            <el-option label="初中" value="junior high school"></el-option>
                            <el-option label="高中" value="high school"></el-option>
                            <el-option label="中专" value="secondary specialized school"></el-option>
                            <el-option label="大专" value="junior college"></el-option>
                            <el-option label="本科" value="undergraduate"></el-option>
                            <el-option label="硕士" value="master"></el-option>
                            <el-option label="博士" value="doctor"></el-option>
                            <el-option label="其他" value="other"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="国家/地区">
                        <el-select placeholder="请选择" v-model="Msg.nationalArea">
                            <el-option label="中国大陆" value="China"></el-option>
                            <el-option label="港澳台" value="HMT"></el-option>
                            <el-option label="国外" value="abroad"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="护照号">
                        <el-input placeholder="正确的护照格式" v-model="Msg.passportNo"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号">
                        <el-input placeholder="正确的身份证格式" v-model="Msg.idNumber"></el-input>
                    </el-form-item>
                    <el-form-item label="籍贯">
                        <el-input placeholder="籍贯地址" v-model="Msg.nativePlace"></el-input>
                    </el-form-item>
                    <el-form-item label="民族">
                        <el-input placeholder="请输入民族" v-model="Msg.nation"></el-input>
                    </el-form-item>
                    <el-form-item label="婚姻状况">
                        <el-select placeholder="请选择" v-model="Msg.maritalStatus">
                            <el-option label="已婚" value="married"></el-option>
                            <el-option label="未婚" value="unmarried"></el-option>
                            <el-option label="离异" value="divorce"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="生日">
                        <el-input placeholder="示例0323" v-model="Msg.birthday"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄">
                        <el-input v-model="Msg.age"></el-input>
                    </el-form-item>
                    <el-form-item label="政治面貌">
                        <el-input v-model="Msg.politicalOutlook"></el-input>
                    </el-form-item>
                    <el-form-item label="入党时间">
                        <el-col :span="11">
                            <el-date-picker type="date" placeholder="选择日期" style="width: 100%;" v-model="Msg.timeToJoinTheParty"></el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="存档机构">
                        <el-input v-model="Msg.archivingOrganization"></el-input>
                    </el-form-item>
                    <el-form-item label="子女状况">
                        <el-input v-model="Msg.stateOfChildren"></el-input>
                    </el-form-item>
                    <el-form-item label="子女是否又商业险">
                        <el-radio-group v-model="Msg.doChildrenHaveCommercialInsurance">
                            <el-radio label="有"></el-radio>
                            <el-radio label="无"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="有无违法违纪状态">
                        <el-input v-model="Msg.isThereAnyViolationOfLawOrDiscipline"></el-input>
                    </el-form-item>
                    <el-form-item label="有无重大病史">
                        <el-input v-model="Msg.areThereAnyMajorMedicalHistories"></el-input>
                    </el-form-item>
                    <p>通讯信息</p>
                    <el-form-item label="QQ">
                        <el-input v-model="Msg.qq"></el-input>
                    </el-form-item>
                    <el-form-item label="微信">
                        <el-input v-model="Msg.wechat"></el-input>
                    </el-form-item>
                    <el-form-item label="现居住地">
                        <el-input v-model="Msg.placeOfResidence"></el-input>
                    </el-form-item>
                    <el-form-item label="通讯地址">
                        <el-input v-model="Msg.postalAddress"></el-input>
                    </el-form-item>
                    <el-form-item label="联系手机">
                        <el-input v-model="Msg.contactTheMobilePhone"></el-input>
                    </el-form-item>
                    <el-form-item label="个人邮箱">
                        <el-input v-model="Msg.personalMailbox"></el-input>
                    </el-form-item>
                    <el-form-item label="紧急联系人">
                        <el-input v-model="Msg.emergencyContact"></el-input>
                    </el-form-item>
                    <el-form-item label="紧急联系电话">
                        <el-input v-model="Msg.emergencyContactNumber"></el-input>
                    </el-form-item>
                    <p>账号信息</p>
                    <el-form-item label="社保账户">
                        <el-input v-model="Msg.socialSecurityComputerNumber"></el-input>
                    </el-form-item>
                    <el-form-item label="公积金账户">
                        <el-input v-model="Msg.providentFundAccount"></el-input>
                    </el-form-item>
                    <el-form-item label="银行卡号">
                        <el-input v-model="Msg.bankCardNumber"></el-input>
                    </el-form-item>
                    <el-form-item label="开户行">
                        <el-input v-model="Msg.openingBank"></el-input>
                    </el-form-item>
                    <p>教育信息</p>
                    <el-form-item label="学历类型">
                        <el-select placeholder="请选择" v-model="Msg.educationalType">
                            <el-option label="统招" value="Unified recruitment"></el-option>
                            <el-option label="自考" value="Self"></el-option>
                            <el-option label="成考" value="test as"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="毕业学校">
                        <el-input v-model="Msg.graduateSchool"></el-input>
                    </el-form-item>
                    <el-form-item label="入学时间">
                        <el-col :span="11">
                            <el-date-picker type="date" placeholder="选择日期" style="width: 100%;" v-model="Msg.enrolmentTime"></el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="毕业时间">
                        <el-col :span="11">
                            <el-date-picker type="date" placeholder="选择日期" style="width: 100%;" v-model="Msg.graduationTime"></el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="专业">
                        <el-input v-model="Msg.major"></el-input>
                    </el-form-item>
                    <p>就业信息</p>
                    <el-form-item label="上家公司">
                        <el-input v-model="Msg.homeCompany"></el-input>
                    </el-form-item>
                    <el-form-item label="职称">
                        <el-input v-model="Msg.title"></el-input>
                    </el-form-item>
                    <el-form-item label="有无竞业限制">
                        <el-input v-model="Msg.isThereAnyCompetitionRestriction"></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="Msg.remarks"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="saveMsg">保存更新</el-button>
                        <el-button>返回</el-button>
                    </el-form-item>
                </el-form>

            </el-tab-pane> 
            <el-tab-pane label="岗位信息" name="third">
                <el-form ref="userJobs" label-width="150px" :model="jobData">
                    <p>基础信息</p>
                    <el-form-item label="岗位">
                        <el-input v-model="jobData.post"></el-input>
                    </el-form-item>
                    <el-form-item label="转正状态">
                        <el-select placeholder="请选择" v-model="jobData.stateOfCorrection">
                            <el-option label="已转正" value="yes"></el-option>
                            <el-option label="未转正" value="no"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="职级">
                        <el-input v-model="jobData.rank"></el-input>
                    </el-form-item>
                    <el-form-item label="转正评价">
                        <el-input type="textarea" v-model="jobData.correctionEvaluation"></el-input>
                    </el-form-item>
                    <el-form-item label="汇报对象">
                        <el-select placeholder="请选择" v-model="jobData.reportName">
                            <!-- 需遍历名字 -->
                            <el-option label="已转正" value="yes"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="HRBP">
                        <el-select placeholder="请选择" v-model="jobData.hrbp">
                            <!-- 需遍历名字 -->
                            <el-option label="已转正" value="yes"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="调整司龄(天)">
                        <el-input v-model="jobData.adjustmentAgedays"></el-input>
                    </el-form-item>
                    <el-form-item label="首次参加工作时间">
                        <el-col :span="11">
                            <el-date-picker type="date" placeholder="选择日期" style="width: 100%;" v-model="jobData.workingTimeForTheFirstTime"></el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="调整工龄" disabled>
                        <el-input value="0.00年" v-model="jobData.adjustmentOfLengthOfService"></el-input>
                    </el-form-item>
                    <p>合同信息</p>
                    <el-form-item label="首次合同开始时间">
                        <el-col :span="11">
                            <el-date-picker type="date" placeholder="选择日期" style="width: 100%;" v-model="jobData.initialContractStartTime"></el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="首次合同结束时间">
                        <el-col :span="11">
                            <el-date-picker type="date" placeholder="选择日期" style="width: 100%;" v-model="jobData.firstContractTerminationTime"></el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="现合同开始时间">
                        <el-col :span="11">
                            <el-date-picker type="date" placeholder="选择日期" style="width: 100%;" v-model="jobData.currentContractStartTime"></el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="现合同结束时间">
                        <el-col :span="11">
                            <el-date-picker type="date" placeholder="选择日期" style="width: 100%;" v-model="jobData.closingTimeOfCurrentContract"></el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="合同期限">
                        <el-select placeholder="请选择" v-model="jobData.contractPeriod">
                            <el-option label="6月" value="six"></el-option>
                            <el-option label="12月" value="twelve"></el-option>
                            <el-option label="24月" value="twenty-four"></el-option>
                            <el-option label="36月" value="thirty-six"></el-option>
                            <el-option label="其他" value="other"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="续签次数">
                        <el-select placeholder="请选择" v-model="jobData.renewalNumber">
                            <el-option label="0次" value="zero"></el-option>
                            <el-option label="1次" value="one"></el-option>
                            <el-option label="2次" value="two"></el-option>
                            <el-option label="3次" value="three"></el-option>
                            <el-option label="4次及以上" value="more"></el-option>
                        </el-select>
                    </el-form-item>
                    <p>招聘信息</p>
                    <el-form-item label="其他招聘渠道">
                        <el-select placeholder="请选择" v-model="jobData.otherRecruitmentChannels">
                            <el-option label="智联招聘" value="zhi"></el-option>
                            <el-option label="拉勾网" value="la"></el-option>
                            <el-option label="猎聘网" value="lie"></el-option>
                            <el-option label="前程无忧" value="qian"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="招聘渠道">
                        <el-select placeholder="请选择" v-model="jobData.recruitmentChannels">
                            <el-option label="内部推荐" value="nei"></el-option>
                            <el-option label="校园宣讲" value="xiao"></el-option>
                            <el-option label="猎头" value="tou"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="社招/校招">
                        <el-select placeholder="请选择" v-model="jobData.socialRecruitment">
                            <!-- 需遍历名字 -->
                            <el-option label="已转正" value="yes"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="推荐人/企业" redaonly>
                        <el-input v-model="jobData.recommenderBusinessPeople"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click='saveJobs'>保存更新</el-button>
                        <el-button>返回</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
      </h2>
    </div>
  </div>
</template>
<script>
import { getUserDetailById } from "@/api/user";
import { saveUserDetailById, getUserJobsById, saveUserJobsById, getUserMsgById, saveUserMsgById} from "@/api/employees"


export default {
    name:"staff",
    data(){
        return {
            userId:this.$route.params.id,
            userData:{
                username:'',
                password2:'',
            },
            jobData:{},
            Msg:{},
            rules:{
                username:[{ required: true, message: '用户名不能为空', trigger: 'blur' }],
                password2:[{required: true, message: '密码不能为空', trigger: 'blur' },{ min: 6,max:9, message: '密码长度6~9位', trigger: 'blur'}]
            }
        }
    },
    created(){
        this.getUserDetailById()
        this.getUserJobsById()
        this.getUserMsgById()
    },
    methods:{
        // 请求登录信息
        async getUserDetailById(){
            this.userData= await getUserDetailById(this.userId)
        },
        // 保存登录信息
        saveUser(){
            this.$refs.userNew.validate().then(()=>{
                saveUserDetailById({...this.userData,password:this.userData.password2})
                this.$message('修改登录账户信息成功')
            })
        },
        // 请求岗位信息
        async getUserJobsById(){
            this.jobData=await getUserJobsById(this.userId)
        },
        // 保存岗位信息
        saveJobs(){
            this.$refs.userJobs.validate().then(()=>{
                saveUserJobsById(this.jobData)
                this.$message('修改岗位信息成功')
            }) 
        },
        // 请求个人信息
        async getUserMsgById(){
            this.Msg=await getUserMsgById(this.userId)
        },
        // 保存个人信息
        saveMsg(){
            this.$refs.userMsg.validate().then(()=>{
                saveUserMsgById(this.Msg)
                this.$message('修改基本信息成功')
            })
        }
    }
}
</script>

<style scoped>
.loginMsg{
    width: 400px;
    margin: 30px 0 0 100px;
}
</style>